<template>
  <div class="fa">
    <div v-if="item.order != length" class="white">
      <div class="blue" :style="{ backgroundColor: item.switch ? '#1677ff' : '#eaecf5' }">{{ item.order }}</div>
      <div class="connect"></div>
    </div>
    <div v-else class="endwhite">
      <div class="blue" :style="{ backgroundColor: item.switch ? '#1677ff' : '' }">{{ item.order }}</div>
    </div>
    <div class="right">
      <span>{{ item.name }}</span>
      <div v-if="item.isshow" style="font-size: 14px">开启状态&nbsp; <a-switch @change="change" v-model:checked="formState.delivery" /></div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineProps, defineEmits } from 'vue';
const emit = defineEmits(['change']);
const props = defineProps({
  item: { type: Object, default: {} },
  length: { type: Number, default: 0 },
});

const formState = reactive({
  delivery: props.item.switch,
});
const change = (checked) => {
  emit('change', [props.item.attribute, props.item.order, checked]);
};
</script>
<style lang="less" scoped>
.fa {
  box-sizing: border-box;
  display: flex;
  height: 99px;
  overflow: hidden;
  .white {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    .blue {
      width: 34px;
      height: 34px;
      border-radius: 17px;
      background-color: #1677ff;
      color: #fff;
      font-size: 22px;
      text-align: center;
      line-height: 34px;
      z-index: 3;
    }
    .connect {
      width: 10px;
      height: 70px;
      background-color: #1677ff;
      position: absolute;
      z-index: 1;
      top: 48px;
    }
  }
  .endwhite {
    background-color: #eaecf5;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    .blue {
      width: 34px;
      height: 34px;
      border-radius: 17px;
      background-color: #fff;
      color: #eaecf5;
      font-size: 22px;
      text-align: center;
      line-height: 34px;
      z-index: 3;
    }
  }
  .right {
    margin-left: 20px;
    font-size: 16px;
    flex: 1;
  }
}
</style>
